<style lang="less">
</style>

<template>
    <div class="user-list-view">
        <Card>
            <span slot="title">用户账户资金变动月报表统计</span>
            <span slot="extra">
                <Button type="warning" :loading="exportLoading" size="small" @click="handleExportExcel">导出到excel文件</Button>
                <Button  size="small" type="success" icon="loop" @click="getList">刷新列表</Button>
            </span>
            <Form label-position="right" label-width="70" inline>
                <Row>
                    <FormItem label="省市区：">
                        <Cascader style="margin-top:5px; width: 250px;" :data="regions" change-on-select size="small" trigger="hover" v-model="regionSelected"></Cascader>
                    </FormItem>
                    <FormItem label="月份:" label-position="left">
                        <DatePicker format="yyyy-MM" :value="search.month" :options="dateOptions" :editable="false" :clearable="false" @on-change="handleChangeDate" size="small" type="month" placeholder="请选择月份"></DatePicker>
                    </FormItem>

                    <FormItem label-width="0">
                        <Button type="success" :loading="searchLoading" size="small" icon="ios-search"
                                @click="handleSearch">筛选
                        </Button>
                    </FormItem>
                </Row>

            </Form>

            <Row>
                <Col>
                    <Table ref="tableExcel" border :loading="loading" height="450" :context="self" :columns="columns" :data="data"></Table>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import moment from 'moment';
    import AgentSelect from '../public/AgentSelect.vue';
    import table2excel from '@/libs/table2excel.js';

    export default {
        components: {
            AgentSelect
        },

        data () {
            return {
                self: this,

                searchLoading: false,
                search: {
                    is_export: 'no',
                    province_code: '',
                    city_code: '',
                    district_code: '',
                    month: '',
                },

                loading: false,
                exportLoading: false,

                regions: [],
                regionSelected: [],
                regionLoading: false,

                dateOptions: {
                    disabledDate (date) {
                        return date && moment(date).isAfter(moment().format('YYYY-MM'), 'month');
                    }
                },

                columns: [
                    {
                        title: '账号',
                        key: 'username',
                        width: 150,
                    },
                    {
                        title: '所在地',
                        key: 'region_text'
                    },
                    {
                        title: '消费总金额(单位：元)',
                        key: 'consume',
                        width: 200,
                    },
                    {
                        title: '充值总金额(单位：元)',
                        key: 'charge',
                        width: 200,
                    }
                ],
                data: []
            }
        },

        watch: {
            regionSelected: function (newVal) {
                if (newVal) {
                    if (newVal.length > 2) {
                        this.search.district_code = newVal[2];
                    } else {
                        this.search.district_code = '';
                    }

                    if (newVal.length > 1) {
                        this.search.city_code = newVal[1];
                    } else {
                        this.search.city_code = '';
                    }

                    if (newVal.length > 0) {
                        this.search.province_code = newVal[0];
                    } else {
                        this.search.province_code = '';
                    }
                } else {
                    this.search.province_code = '';
                    this.search.city_code = '';
                    this.search.district_code = '';
                }
            }
        },

        mounted () {
            this.getList();
        },

        created () {
            this.search.month = moment().format('YYYY-MM');
            this.getRegions();
        },

        methods: {
            getList() {
                this.loading = true;
                this.searchLoading = true;

                let params = {};
                params = Object.assign(params, this.search);

                util.api().get(`/admin/api/reports/user/balance/month`, {
                    params
                }).then((resp) => {
                    this.$Message.destroy();
                    if (resp.data.status == true) {
                        this.data = resp.data.data;
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                    this.loading = false;
                    this.searchLoading = false;
                }).catch((e) => {
                    util.handleApiException(e, this, '获取用户账户资金变动月报表统计失败');
                    this.searchLoading = false;
                    this.loading = false;
                })
            },

            handleSearch() {
                this.getList();
            },


            handleChangeDate (date) {
                this.search.month = date;
                console.log(date);
            },

            agentSelectChange (value) {
                this.search.agent_user_id = value;
            },

            handleExportExcel () {
                this.exportLoading = true;
                this.search.is_export = 'yes';

                let params = {};
                params = Object.assign(params, this.search);

                util.api().get(`/admin/api/reports/user/balance/month`, {
                    params,
                }).then((resp) => {
                    if (resp.data.status == false) {
                        this.$Notice.error({ title: '导出失败' });
                    } else {
                        this.$Notice.success({ title: '导出成功', desc: '数据文件下载中...' });
                        window.location.href = resp.data.data.url;
                    }
                    console.log(resp.data);
                    this.search.is_export = 'no';
                    this.exportLoading = false;
                }).catch((e) => {
                    util.handleApiException(e, this, '导出用户账户资金变动月报表统计报表失败');
                    this.search.is_export = 'no';
                    this.exportLoading = false;
                })
            },

            getRegions () {
                this.regionLoading = true;
                util.ajax.get('/api/regions/format').then((resp) => {
                    const formatTree = (arr) => {
                        let regions = [];
                        for (let i in arr) {
                            let node = {};
                            node.value = arr[i].code;
                            node.label = arr[i].name;
                            node.disabled = arr[i].disabled;
                            if (arr[i].hasOwnProperty('children')) {
                                node.children = formatTree(arr[i].children);
                            }

                            regions.push(node);
                        }
                        return regions;
                    };

                    this.regions = formatTree(resp.data.data);
                    this.regionLoading = false;
                }).catch((e) => {
                    this.regionLoading = false;
                    util.handleApiException(e, this, '获取省市区数据失败');
                })
            },
        }
    };
</script>
